﻿
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>欢迎登陆</title>
</head>
<body style="background:url('../../../assets/bg3.jpg');background-size:100% 100%">
    <div id="app" v-cloak >
        <div class="login" >
            <div class="box-card" >
                <!--登录表单-->
                <el-form :model="LoginForm"
                         status-icon
                         ref="LoginForm"
                         label-width="100px"
                         class="demo-dynamic">
                    <div style="margin-bottom:20px;">
                        <p>登  录</p>
                    </div>
                    <el-form-item prop="user" :rules="[{required:true,message:'用户名不能为空',trigger:'blur'}]" class="item">
                        <el-input v-model="LoginForm.user " prefix-icon="el-icon-user" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="pwd" :rules="[{required:true,message:'密码不能为空',trigger:'blur'}]" class="item">
                        <el-input type="password" v-model="LoginForm.pwd" prefix-icon="el-icon-lock" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item class="codeitem">
                        <el-input v-model="Vercode" placeholder="请输入验证码" ></el-input>
                        <div id="verificationCode" class="verificationCode">
                            <canvas width="110" height="40" id="verifyCanvas"></canvas>
                            <img id="code_img">
                        </div>
                    </el-form-item>
                    <el-form-item class="forgetpwd">
                        <el-link type="primary" :underline="false">忘记密码</el-link>
                    </el-form-item>

                    <el-form-item class="item">
                        <el-button type="primary" v-on:click="submitForm('LoginForm')" :loading="loading"  round :disabled="disabled" class="sumbtn">登录</el-button>
                    </el-form-item>
                </el-form>
                <div>

                </div>
            </div>
        </div>
    </div>
    <script src="~/Scripts/vue.min.js"></script>
    <script src="~/Scripts/ElementUI/element-ui.js"></script>
    <script src="~/Scripts/nprogress.min.js"></script>
    <script src="~/Scripts/axios.min.js"></script>
    <link href="~/Content/nprogress.css" rel="stylesheet" />
    <link href="~/Content/theme-white.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.1.min.js"></script>
    <script src="~/Scripts/verificationCode.js"></script>
    <script>
        $(function () {
            if (window.history && window.history.pushState) {
                $(window).on('popstate', function () {
                    window.history.pushState('forward', null, '#');
                    window.history.forward(1);
                });
            }
            window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
            window.history.forward(1);
            document.getElementById('code_img').onclick = function () {
                resetCode();
            }
        });//到登录页面后禁止返回
        var vm = new Vue({
            el: "#app",
            data() {
                return {
                    LoginForm: {
                        user: "",
                        pwd: ""
                    },//登录参数
                    loading: false,//加载组件
                    disabled: true,//按钮禁止
                    Vercode: '', //验证码
                    fullscreenLoading: false,//全屏加载
                };
            },
            methods: {
                submitForm(formName) {
                    let _this = this
                    if (_this.Vercode.toUpperCase() == verVal) {
                        this.loading = true;
                        _this.$refs.LoginForm.validate((valid) => {
                            if (valid) {//如果验证成功
                                var params = { UserName: _this.LoginForm.user, Password: _this.LoginForm.pwd, VerificationCode: _this.Vercode }//登陆参数
                                var timer = setTimeout(() => {
                                    _this.$message({
                                        message: "登陆超时",
                                        type: 'warning'
                                    });
                                    this.loading = false;
                                }, 5000);//设置定时器，5S后未登录成功，则提示登陆超时
                                axios.post("/Login/UserLogin", params).then(data => {
                                    if (data.data.status != 1) {
                                        _this.$message({
                                            message: data.data.message,
                                            type: 'error'
                                        });
                                        _this.Vercode = '';
                                        resetCode();
                                        this.loading = false;
                                        clearInterval(timer);       //清除定时器

                                    } else {
                                        axios.post('/Home/GetMenu', { 'ID': data.data.data.ID }).then(res => {
                                            this.loading = false;
                                            if (res.data.statusCode == 1) {
                                                localStorage.setItem('menus', JSON.stringify(res.data.data));
                                            }
                                            this.$loading({
                                                lock: true,
                                                text: '登陆成功,正在获取菜单中',
                                                spinner: 'el-icon-loading',
                                                background: 'rgba(0, 0, 0, 0.7)'
                                            });
                                            localStorage.setItem("loginTime", this.getDataTimeNow())
                                        });
                                        this.timers = setTimeout(() => {   //设置延迟执行
                                            window.location = "/Home/Index";   //跳转
                                        }, 2000);
                                        clearInterval(timer);       //清除定时器
                                        localStorage.setItem('userInfo', JSON.stringify(data.data.data));
                                    }
                                });//获取数据并且判断是否正确

                            } else//验证失败
                            {
                                _this.$message({
                                    message: "请检查输入的内容",
                                    type: 'error'
                                });
                                _this.Vercode = '';
                                resetCode();
                                this.loading = false;
                            }
                        });
                    }
                    else {
                        _this.$message({
                            message: "输入正确的验证码",
                            type: 'error'
                        });
                        _this.Vercode = '';
                        resetCode();
                    }

                },//登录
                getDataTimeNow() {
                    var nowstr = new Date();
                    var datenow = nowstr.getFullYear() + "-"
                        + ((nowstr.getMonth() + 1) < 10 ? "0" : "") + (nowstr.getMonth() + 1) + "-"
                        + (nowstr.getDate() < 10 ? "0" : "") + nowstr.getDate()
                        + " "
                        + (nowstr.getHours() < 10 ? "0" : "") + nowstr.getHours() + ":"
                        + (nowstr.getMinutes() < 10 ? "0" : "") + nowstr.getMinutes() + ":"
                        + (nowstr.getSeconds() < 10 ? "0" : "") + nowstr.getSeconds();
                    return datenow;

                },//获取登录时间
            },
            created() {
                var _this = this;
                document.onkeydown = function (e) {
                    let key = window.event.keyCode;
                    if (key == 13) {
                        if (_this.LoginForm.user != "" && _this.LoginForm.pwd != "" && _this.LoginForm.user != null && _this.LoginForm.pwd != null) {
                            _this.submitForm();
                        }
                    }
                };
            },//按回车键登录
            mounted: function () {
                localStorage.clear();             
            },
            watch: {
                LoginForm: {
                    handler(newValue, oldValue) {
                        if (newValue.user != "" && newValue.pwd != "" && newValue.user != null && newValue.pwd != null) {
                            this.disabled = false;
                        } else {
                            this.disabled = true;
                        }
                    }, deep: true
                }
            },//监听input状态
        })

    </script>
    <style>
        .el-input__inner {
            border: 1px solid #fff;
            background-color: #f7f8fa;
            height:45px;
            line-height:45px;
        }
        .el-form-item__error, .el-form-item.is-error .el-input__validateIcon {
            color: #545454;
        }
        .el-input__inner:hover, .el-input__inner:focus {
                border-color: #fff;
        }
        .el-input__inner::-webkit-input-placeholder {
            color: #595d6e
        }
        .el-input__inner:-ms-input-placeholder {
            color: #595d6e
        }
        .el-input__inner::-ms-input-placeholder {
            color: #595d6e
        }
        .el-input__inner::placeholder {
            color: #595d6e
        }
        .el-form-item.is-error .el-input__inner, .el-form-item.is-error .el-input__inner:focus, .el-form-item.is-error .el-textarea__inner, .el-form-item.is-error .el-textarea__inner:focus, .el-message-box__input input.invalid, .el-message-box__input input.invalid:focus{
            border-color:#fff;
        }
        html,
        body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .login {
            height: 100%;
            width: 100%;
        }

        .box-card {
            z-index: 999;
            width: 420px;
            height: 430px;
            text-align: center;
            border-radius: 10px;
            left: 40%;
            top: 25%;
            position: absolute;
            opacity: 0.9;
        }

        .item {
            margin-left: -90px;
        }

        .codeitem {
            margin-left: -90px;
            width: 340px;
        }

        .sumbtn {
            width: 50%;
        }

        .forgetpwd {
            height: 20px;
            text-align: right;
        }     
        .verificationCode {
            width: 4rem;
            height: 100%;
            position: absolute;
            right: -70%;
            top: 0;
            width: 110px;
        }

        canvas {
            width: 100%;
            height: 100%;
        }

        #code_img {
            width: 100%;
            height: 100%;
            cursor: pointer;
            vertical-align: top;
        }
    </style>
</body>
</html>
